import  React,{memo,useState} from 'react'
import { Modal , Upload ,Select,Image} from 'antd';
function UpdataItem (){
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [options,setOptions] = useState([
    {
      value:0,
      label:"全部相册(0)"
    },
    {
      value:2,
      label:"默认相册(0)"
    }
  ])
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const handleChange = (value: string | string[]) => {
    console.log(`Selected: ${value}`);
  };
  return <>
    <div className="updata-box">
        <div className="updata-item">
          <Upload
            name="avatar"
            showUploadList={false}
            action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
          >
           <i className="iconfont mt-xiangji"></i>
            <div className="upData-text">本地</div>
          </Upload>
        </div>
        <div onClick={()=>showModal()} className="updata-item ut-2">
          <i className="iconfont mt-xinwenzixun-xianxing"></i>
          <div className="upData-text">相册</div>
        </div>

    </div>
    <Modal title="从相册中插入图片"
           width={700}
           open={isModalOpen}
           onOk={handleOk}
           onCancel={handleCancel}>
       <div className="img-main">
          <div className="img-l">
            <div className="img-l-top">
              <div className="img-t-l">
                <Select
                  size={'small'}
                  defaultValue={0}
                  placeholder="请选择相册"
                  onChange={handleChange}
                  className="img-select"
                  options={options}
                />
              </div>
              <div className="img-t-r">刷新</div>
            </div>
            <div className="img-list">
              <div className="img-lite-item">
                <Image
                  width={90}
                  preview={false}
                  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                />
              </div>


            </div>
          </div>
         <div className="img-r">
           <div className="img-r-top">
             <div>已选图片</div>
             <span>0/9</span>
           </div>
             <div className="img-r-box">
               <div className="img-lite-item">
                 <Image
                   width={90}
                   preview={false}
                   src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                 />
                 <i className="iconfont mt-roundclosefill"></i>
               </div>




             </div>

         </div>

       </div>
    </Modal>
  </>
}

export default memo(UpdataItem);
